<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .fl {
            float: left;
        }

        .rl {
            float: right;
        }

        .wrapper {
            width: 1464px;
            /* height: 500px; */
            position: relative;
            margin: 100px auto;
            /* background-color: red; */

        }

        .wrapper .section {
            /* margin: 100px auto; */
            width: 270px;
            /* border: 1px solid rgb(190, 184, 184); */
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
            border-radius: 10px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .wrapper .section .topimg {
            width: 270px;
        }

        .wrapper .section .topimg img {
            width: 270px;
        }

        .wrapper .section .text {
            margin-top: 30px;
            margin-bottom: 27px;
            margin-left: 22px;
            margin-right: 50px;

        }

        .wrapper .user {
            width: 270px;
            height: 50px;
            margin-bottom: 10px;
        }

        .wrapper .user .userimg {
            margin-left: 20px;
            height: 35px;
            float: left;
            border-radius: 50%;
            vertical-align: 4px;
        }

        .wrapper .user .userimg span {
            float: right;
            line-height: 35px;
            margin-left: 10px;
            font-size: 5px;
        }

        .wrapper .user .userimg img {
            width: 40px;
            height: 35px;
            border-radius: 50%;
            float: left;
        }

        .wrapper .user .userlove {
            margin-right: 10px;
            float: right;
            height: 50px;
            width: 80px;
            /* margin-bottom: 10px; */

        }

        .wrapper .user .userlove img {
            width: 40px;
            height: 35px;
        }

        .wrapper .user .userlove span {
           
            float: right;
            line-height: 35px;
        }
        .wrapper .section .mask{
            width: 100%;
            height: 100%;
            background:rgba(0,2,4,.2);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            cursor: pointer;
        }
        .wrapper .section:hover .mask{
            display: block;
        }
    </style>

    <script src="../jQuery小米闪购层滑动效果/js/jquery.js"></script>
    <script>
        $(function(){
            var wrapperwidth=$(".wrapper").width();
            var sectionwidth=$(".wrapper .section").width()

            var arrHeight=[]
            var gap=18

            // console.log(wrapperwidth,sectionwidth);
            var maxColumn=Math.floor(wrapperwidth/sectionwidth);

            $(".section").each(function(index,item){
                console.log( $(item).height());
                if(index<maxColumn){
                    $(item).css( {
                        top:0,
                        left:(sectionwidth+gap)*index
                    } )
                }else{
                    var res = getArrMin( arrHeight );
                    console.log(res);
                    var minValue = res.value;
                    var minIndex = res.index;
                    
                    console.log(minValue,minIndex);
                    $(domElement).css({
                        top: minValue+gap,
                        left: (itemWidth+gap)*minIndex
                    });

                }
                // arrHeight.push( $(item).height() )
                // console.log(arrHeight);
            })




            function getArrMin( myArr ){
                var minObj = {};
                minObj.index = 0;
                minObj.value = myArr[0];

                for(var i = 1; i < myArr.length; i++){
                    if( minObj.value > myArr[i] ){
                        minObj.value = myArr[i];
                        minObj.index = i;
                    }
                }

                return minObj;
            }
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <div class="section">
            <div class="topimg">
                <img src="./images/pic/01.jpg" alt="">
            </div>

            <div class="text">
                <span>拥有一台宾利GT，如何拍，才不会被说炫富？</span>
            </div>

            <div class="user">
                <div class="userimg">
                    <img src="./images/touxiang/01.jpg" alt="">
                    <span>金英焕</span>
                </div>

                <div class="userlove">
                    <img src="./images/heart.png" alt="">
                    <span>123</span>
                </div>
            </div>
            <div class="mask"></div>
        </div>

        <div class="section">
            <div class="topimg">
                <img src="./images/pic/02.jpg" alt="">
            </div>

            <div class="text">
                <span>🛁清凉一夏，宝宝用的这些东西你🉐知道…</span>
            </div>

            <div class="user">
                <div class="userimg">
                    <img src="./images/touxiang/02.jpg" alt="">
                    <span>我是牛油果呀呀</span>
                </div>

                <div class="userlove">
                    <img src="./images/heart.png" alt="">
                    <span>112</span>
                </div>
            </div>
            <div class="mask"></div>
        </div>

        <div class="section">
            <div class="topimg">
                <img src="./images/pic/03.jpg" alt="">
            </div>

            <div class="text">
                <span>这些超火的动漫台词你绝对都有听过</span>
            </div>

            <div class="user">
                <div class="userimg">
                    <img src="./images/touxiang/03.jpg" alt="">
                    <span>学说日语</span>
                </div>

                <div class="userlove">
                    <img src="./images/heart.png" alt="">
                    <span>305</span>
                </div>
            </div>
            <div class="mask"></div>
        </div>

        <div class="section">
            <div class="topimg">
                <img src="./images/pic/04.jpg" alt="">
            </div>

            <div class="text">
                <span>高段位的科学育儿理念！原来是它～</span>
            </div>

            <div class="user">
                <div class="userimg">
                    <img src="./images/touxiang/04.jpg" alt="">
                    <span>小迷姐儿是豆豆龙</span>
                </div>

                <div class="userlove">
                    <img src="./images/heart.png" alt="">
                    <span>164</span>
                </div>
            </div>
            <div class="mask"></div>
        </div>

        <div class="section">
            <div class="topimg">
                <img src="./images/pic/05.jpg" alt="">
            </div>

            <div class="text">
                <span>没想到因为婴儿推车，我居然被孩子爸夸了…</span>
            </div>

            <div class="user">
                <div class="userimg">
                    <img src="./images/touxiang/05.jpg" alt="">
                    <span>我是牛油果呀呀</span>
                </div>

                <div class="userlove">
                    <img src="./images/heart.png" alt="">
                    <span>164</span>
                </div>
            </div>
            <div class="mask"></div>
        </div>
    </div>
</body>

</html>